<template>
  <div>
    {{msg}}
    <br/>
     <a-button type="primary"  v-if="isShow"  @click="hideFooter">
      demo001-点击影藏
    </a-button>
     <br/>
     <br/>
     <br/>
    <a-button type="primary"  @click="setNewNum(1)">
      vuex增加值
    </a-button>

    <div class="components-input-demo-size">
     <a-input v-model='getChangedNum' />
    </div>

  </div>
</template>

<script>
import {mapState,mapGetters,mapActions} from 'vuex'; 
export default {
  name: 'demo',
  data () {
    return {
      msg: '测试路由和vuex页面',
    }
  },
   mounted(){
    console.log(this.getChangedNum);
     //打开页面就提示
     this.openNotification()
   },
   computed:{
    // ...mapState({  //这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
    //      isShow:state=>state.demo.showFooter //注意这些与上面的区别就是state.demo,
    //                                                   //里面定义的showFooter是指demo.js里state的showFooter
    //   }),
     //你也可以用下面的mapGetters来获取isShow的值，貌似下面的更简洁
    ...mapGetters('demo',[ //footerStatus指的是modules文件夹下的demo.js模块
         'getChangedNum',
         'isShow' //第一个isShow是我自定义的只要对应template里v-if="isShow"就行，
                         //第二个isShow是对应的demo.js里的getters里的isShow
      ]),
   
  },
   methods: {
    ...mapActions('demo',[ //demo是指modules文件夹下的demo.js
          'hideFooter','setNewNum'  //demo.js文件中的actions里的方法，在上面的@click中执行并传入实参
      ]),
    //  isShow(){
    //      return this.$store.getters.isShow;
    //  },
    //  hideDemo(){
    //      this.$store.dispatch('hideFooter')
    //  },
     openNotification() {
      this.$notification.open({
        message: this.msg,
        description:this.msg,
        onClick: () => {
          console.log('关闭通知！');
        },
      });
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
